<template>
  <div class="empty noneData">
    <div v-if="!show">
      <svg-icon icon-class="none" class-name="none-icon" />
      <h2>{{ $t(description) }}</h2>
    </div>
    <slot v-else />
  </div>
</template>

<script>
export default {
  name: 'Empty',
  props: {
    data: {
      type: [Array, Object],
      required: true
    },
    description: {
      type: String,
      default: '暂无数据',
      desc: '自定义描述内容'
    }
  },
  data() {
    return {
      show: true
    }
  },
  watch: {
    data: {
      handler(newVal) {
        this.$nextTick(() => {
          if (newVal) {
            if (newVal instanceof Array) {
              this.show = newVal.length > 0
            } else {
              this.show = JSON.stringify(newVal) !== '{}'
            }
          } else {
            this.show = false
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.empty {
  height: 100%;
  width: 100%;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}
h2{
  font-size: 15px;
  font-weight: normal;
  color: #a7a7a7;
}
</style>
